<template>
  <div class="content" style="min-width: 1200px; display: block" >
    <el-row v-if="datas.length > 0">
      <el-col
        :span="5"
        v-for="(item, index) in datas"
        :key="item.moduleId"
        :offset="index % 4 > 0 ? 1 : 0"
        style="margin-bottom: 15px;display: block"
      >
        <el-card style="padding: 0px;height:350px;width:272px " shadow="hover">
          <image-preview :src="item.moduleLogo" class="image" />
          <div class="details" style="padding: 14px">
            <div class="title" style="margin-bottom: 0px">{{ item.moduleName }}</div>
            <div class="btn">
              <el-button
                type="text"
                class="button"
                @click="toProduct(item.moduleId)"
                >产品详情</el-button
              >

              <el-button
                type="text"
                class="button"
                @click="toCompany(item.supplierId)"
                >公司详情</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-result v-else icon="info" title="暂无信息" subTitle="请选择其他情况">
    </el-result>
  </div>
</template>

<script>
export default {
  props: {
    datas: {
      type: Array,
      default: [],
    },
  },
  mounted() {},
  methods: {
    toProduct(e) {
      this.$router.push("/prod/" + e);
      console.log(e);
    },
    toCompany(e) {
      console.log(e);
      this.$router.push("/comp/" + e);
    },
  },
};
</script>

<style lang="scss" scoped>
.details {
  .title {
    //height: 50px;
    width:200px; height:25px; line-height:25px;
    overflow: hidden;

  }
  .btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

.image {
  width:272px !important;
  height: 272px !important;
  min-width:272px !important;
  margin-top: -15px;
  margin-left: -20px;

  display: block;
}
.el-card__body{
padding:0px;
}
</style>
